<template>
	<view>
		<view class="mainpadding2">
			<view class="flexcolumn" v-if="!list.length">
				<view class="placeholderimage" style="margin-top: 200rpx;"></view>
				<view class="xiaohui" style="width: 400rpx; text-align: center;">接单中</view>
			</view>
			<view class="mainpadding_top ffffff radius" style="position: relative;" v-for="(item,index) in list" :key="item.id">
				<view class="jiaobiao" v-if="item.type==2">顺风车</view>
				<view class="jiaobiao2" v-if="item.type==1">代驾</view>
				<view class="flexbetween">
					<view class="titletext hei_text bold">{{item.order_no}}</view>
				</view>
				<view class="margin_top flexbetween">
					<view class="flexleft">
						<u-icon name="clock" size="16" color="#999"></u-icon>
						<view class="hei_text main_size margin_left1 bold">{{item.createtime_text}}</view>
					</view>
				</view>
				<view class="flexbetween">
					<view class="">
						<view class="flexleft margin_top">
							<u-icon name="map-fill" size="16" color="#ffa126"></u-icon>
							<view class="margin_left1 xiaohui" style="width: 480rpx;">{{item.start_address}}</view>
						</view>
						<view class="flexleft margin_top">
							<u-icon name="map-fill" size="16" color="#00ac8f"></u-icon>
							<view class="margin_left1 xiaohui" style="width: 500rpx;">{{item.end_address}}
							</view>
						</view>
					</view>
					<view class="qiangdan" @click="qiangdan(item)">接</view>
				</view>
			</view>
		</view>
		<moDal :message="modal" @modalSure="modalSure" @modalcancel="modalcancel"></moDal>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js");
	export default {
		data() {
			return {
				modal: {
					modalShow: false,
					title: "是否确认接单？",
				},
				getListTimer: null,
				list:[],
				lat:"34.74821",
				lng:"113.61332",
				total:0
			}
		},
		onShow() {
			this.is_login = httpRequest.checkIsLogin();
			if (this.is_login) {
				this.init()
			}
		},
		onHide() {
			clearInterval(this.getListTimer)
		},
		methods: {
			modalSure() {
				if (this.modal.title == "是否确认接单？") {
					httpRequest.request('/api1/order/sjjd', 'GET', {
						id: this.listid
					}, false, false, true).then(res => {
						if (res.code == 1) {
							uni.navigateTo({
								url:"/pages/dingdan/orderDetail?id="+this.listid
							})
						} else {
							httpRequest.toast(res.msg);
						}
					}).catch(err => {
						httpRequest.toast(err.msg);
					})
				}
				this.modalcancel()
			},
			modalcancel() {
				this.modal.modalShow = false
			},
			getLocation() {
				let _this = this
				uni.getLocation({
					type: 'wgs64',
					geocode: true, //设置该参数为true可直接获取经纬度及城市信息
					success: function(res) {
						console.log(1213);
						_this.lat = res.latitude
						_this.lng = res.longitude
						_this.getList()
						_this.getListTimer = setInterval(() => {
							_this.getList()
						}, 3000)
					},
					fail(err) {
						console.log(err,1212);
					}
				});
			},
			getList() {
				httpRequest.request('/api1/order/qdindex', 'GET', {
					lat: this.lat,
					lng: this.lng
				}, false, false, true).then(res => {
					if (res.data.length > this.total) {
						this.scanAudio()
					}
					this.list = res.data
					this.total = res.data.length
					
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			scanAudio() {
				const innerAudioContext = uni.createInnerAudioContext();
				innerAudioContext.autoplay = true;
				innerAudioContext.src = "https://a8gogo.com/uploads/20231129/07e5159bbd32523d4a951fd9b5813727.mp3";;
				innerAudioContext.onPlay(() => {
				  console.log('开始播放');
				});
				innerAudioContext.onError((res) => {
				  console.log(res.errMsg);
				  console.log(res.errCode);
				});
			},
			init() {
				this.getLocation()
			},
			qiangdan(item) {
				if (!httpRequest.checkIsLogin()) {
					uni.reLaunch({
						url:"/pages/login/login"
					})
					return false
				}
				this.listid = item.id
				this.modal.modalShow = true
			},
		}
	}
</script>

<style lang="scss" scoped>
	.jiaobiao{
		position: absolute;
		right: 0;
		top: 0;
		border-radius: 0 10rpx 0 10rpx;
		padding: 10rpx 0;
		background-color: #00ac8f;
		color: #fff;
		font-size: 24rpx;
		width: 100rpx;
		text-align: center;
	}
	.jiaobiao2{
		position: absolute;
		right: 0;
		top: 0;
		border-radius: 0 10rpx 0 10rpx;
		padding: 10rpx 0;
		background-color: #ffa126;
		color: #fff;
		font-size: 24rpx;
		width: 100rpx;
		text-align: center;
	}
	.duijiang {
		background-color: #00ac8f;
		color: #ffffff;
		width: 120rpx;
		height: 120rpx;
		margin: 30rpx auto;
		border-radius: 50%;
		line-height: 120rpx;
		text-align: center;
		position: fixed;
		bottom: 400rpx;
		left: 30rpx;
		z-index: 100;
	}

	.duijiang:active {
		background-color: rgba(52, 120, 245, .8);
		color: #fff;
		width: 120rpx;
		height: 120rpx;
		margin: 30rpx auto;
		border-radius: 50%;
		line-height: 120rpx;
		text-align: center;
	}

	.duijiang1 {
		width: 120rpx;
		height: 120rpx;
		margin: 30rpx auto;
		border-radius: 50%;
		line-height: 120rpx;
		text-align: center;
		position: fixed;
		bottom: 400rpx;
		left: 30rpx;
		z-index: 100;
	}

	.qiangdan {
		width: 100rpx;
		height: 100rpx;
		min-width: 100rpx;
		text-align: center;
		line-height: 100rpx;
		background-color: #00ac8f;
		font-size: 40rpx;
		color: #fff;
		font-weight: bold;
		border-radius: 50%;
	}

	.qiangdan:active {
		background-color: rgba(52, 120, 245, .8);
		width: 100rpx;
		height: 100rpx;
		min-width: 100rpx;
		text-align: center;
		line-height: 100rpx;
		font-size: 40rpx;
		color: #fff;
		font-weight: bold;
		border-radius: 50%;
	}
</style>